<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://www.ld.com/shield/tags" prefix="shield"%>
<%@ page trimDirectiveWhitespaces="true" %>
<fmt:setLocale value="zh_CN"/>
<shield:permssion type="button">
<div style="height: 600px;" class="show-info" id="userSeatContainer">
	<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
	<script type="text/javascript" src="${ctxPath}/js/lib/jquery.contextmenu.r2.js"></script>
	<style>
	#userSeatContainer .group0, .groupweb{background-color: rgb(255, 164, 164);}
	#userSeatContainer .group1, .grouppm{background-color: rgb(255, 255, 0);}
	#userSeatContainer .group2, .groupjava1{background-color: rgb(255, 192, 0);}
	#userSeatContainer .group3, .groupjava2{background-color: rgb(0, 176, 240);}
	#userSeatContainer .group4, .groupjava3{background-color: rgb(146, 208, 80);}
	#userSeatContainer .group5, .groupdata{background-color: rgb(112, 234, 234);}
	.userseat_con{position: relative; background-color: rgb(112, 234, 234);width: 300px;height: 200px;margin: 0;position: absolute;left: 25px;top:110px;text-align: center;vertical-align: middle;display: table-cell;}
	.userseat_con .auto-in{position: absolute;top: 50%;padding:0 10px;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);}
	</style>
	<table class="tab-show">
		<colgroup>
			<col width="120">
			<col width="">
			<col width="">
			<col width="">
		</colgroup>
		<tr >
			<td >颜色标示说明：</td>
			<td class="colorgrouptips groupweb">前端组</td>
			<td class="colorgrouptips grouppm">项目管理组</td>
			<td class="colorgrouptips groupjava1">java开发1组</td>
			<td class="colorgrouptips groupjava2">java开发2组</td>
			<td class="colorgrouptips groupjava3">java开发3组</td>
			<td class="colorgrouptips groupdata">未分组</td>
		</tr>
	</table>
	<div id="toolbar" data-url="${ctxPathA }/oa/seats/save">
		<input type="button" value="添加区域" class="btn" id="seats_add" />
		<input type="button" value="解锁区域" class="btn" id="seats_lock" />
		<input type="button" value="保存数据" class="btn" id="seats_save" data-url="${ctxPathA }/oa/seats/save"/>
	</div>
	<div class="zc_container" style="position:absolute;margin-top: 15px;">
		<img src="${ctxPath }/images/oa/zc-bg.jpg" id="seatsbackground"/>
<c:forEach items="${list }" var="model">
	<c:set var="showContent" value="未关联用户！"></c:set>
	<c:set var="divclass" value="group${model.userGroup }"></c:set>
	<c:set var="topv" value="${model.topv }"></c:set>
	<c:if test="${empty model.topv ||  model.topv == 0 }"><c:set var="topv" value="110"></c:set></c:if>
	<c:set var="leftv" value="${model.leftv }"></c:set>
	<c:if test="${empty model.leftv || model.leftv == 0 }"><c:set var="leftv" value="25"></c:set></c:if>
	<c:if test="${not empty  model.user }">
		
		<c:set var="showContent" value='<b class="userName">${model.user.userName }</b>'></c:set>
		<c:set var="showContent" value='${showContent }<div>电　　话：${model.user.mobile }</div>'></c:set>
		<c:set var="showContent" value='${showContent }<div>邮　　箱：${model.user.email }</div>'></c:set>
		<fmt:formatDate value="${model.user.entryDate }" var="entryDate" pattern="yyyy年MM月dd日"/>
		<c:set var="showContent" value='${showContent }<div>入职时间：${entryDate }</div>'></c:set>
	</c:if>
		<div class="userseat_con ${divclass } qtips" data-title="用户信息" data-qtips-class="yellow" 
			shieldSettings="{show:{event:'click mouseenter',solo:true},hide:{event:'unfocus'}}" data-cont='${showContent }'
			style="top: ${topv }px;left: ${leftv }px;width:${model.width }px;height:${model.height }px;" data-id="${model.id }"><div class="auto-in">${model.userName }(${model.seatId })</div></div>
</c:forEach>
	</div>
	
	
	<div id="seatContextMenu" style="position: absolute;display: none;">
	    <ul>
	      <li id="seatContextMenuedit" data-url="${ctxPathA}/oa/seats/toAddOrUpdate">编辑</li>
	      <li id="seatContextMenudel" data-url="${ctxPathA}/oa/seats/del">删除</li>
	    </ul>
	</div>
</div>
<script type="text/javascript">
var contextMenus =  $("#seatContextMenu").find("li").length;
if (contextMenus > 0) {
	$(".userseat_con").contextMenu('seatContextMenu', {
		onContextMenu: function(e) {	
			// 是否显示
	    	// if ($(e.target).hasClass('bluebg')) return true;
			return true;
	  	},
	  	onShowMenu: function(e, menu) {
	  		// alert(event.ucid);
	  		// $('#split', menu).remove();//选中多项只能合并
	    	return menu;
	  	},
	  	bindings: {
			'seatContextMenuedit': function(t) {
				// 编辑	
				ShieldJS.openDialog($("#seatContextMenuedit").data("url"), {'id':$(t).data("id"), type:1}, function(dialogE, dialog){
					//页面处理
			    	ShieldJS.core.bindHtmlAction(dialogE);
			    	ShieldJS.form.initSubmit(dialogE, function(){
			    		dialog.remove();
			    		ShieldJS.siderE.find("."+ShieldJS.css.THIS).click();
			    	});
				}, '修改座次信息');
			},
			'seatContextMenudel': function(t) {
				if(confirm("该操作不可恢复！确定删除该记录吗？")){
					// 删除
					ShieldJS.HtmlAction.postData($("#seatContextMenudel").data("url"), {'id':$(t).data("id")}, null, null, null, null, function(){
						$(t).remove();
					});
				}
			}
		}	
	});
}

var lock = true;
$("#seats_lock").click(function(){
	lock = !lock;
	if (lock) {
		$(".userseat_con").resizable("destroy"); //销毁
		$(".userseat_con").draggable("destroy"); //禁用
		$(this).val("解锁区域");
	} else {
		$(".userseat_con").resizable();//设置缩放
		$(".userseat_con").draggable({
			containment: "#userSeatContainer",
			scroll: false,
			stop: function( event, ui ) {
				var sourceElement = $(ui.helper.context);
				var id = sourceElement.data("id");
				if(id && !changeObj.has(id)){
					changeObj.add(id);
				}
				console.log(sourceElement[0].style.top+" "+sourceElement[0].offsetTop +" "+sourceElement[0].style.left+" offset.top="+ui.offset.top+" offset.left="+ui.offset.left)
			}});//设置drag1只能在containment-wrapper中拖动 
		//$(".dragg").draggable("enable"); //禁用
		$(this).val("锁定区域");
	}
});
var changeObj = new Set();
$("#seats_add").click(function(){
	// 编辑	
	ShieldJS.openDialog($("#seatContextMenuedit").data("url"), {}, function(dialogE, dialog){
		//页面处理
    	ShieldJS.core.bindHtmlAction(dialogE);
    	ShieldJS.form.initSubmit(dialogE, function(formE, targetE, data) {
    		dialog.remove();
    		$("#seatsbackground").after('<div class="userseat_con group'+data.data.userGroup+'" data-id="'+data.data.id+'">'+data.data.userName+'</div>');
    		//ShieldJS.siderE.find("."+ShieldJS.css.THIS).click();
    	});
	}, '修改座次信息');
	// $("#seatsbackground").after('<div class="userseat_con" id="seat_'+new Date().getTime()+'">模板</div>');
});
// 保存
$("#seats_save").click(function(){
	var $this = $(this);
	var paramsStr = "";
	changeObj.forEach(function(value) {
		var id = value;
		var objE = $(".userseat_con[data-id='"+id+"']");
		console.log(value+" "+objE.length);
		//paramsStr += id + '-' + objE[0].style.top + "-"+objE[0].style.left+"-"+objE[0].style.height+"-"+objE[0].style.width+",";
		paramsStr += id + '-' + objE[0].offsetTop + "-"+objE[0].offsetLeft+"-"+objE.height()+"-"+objE.width()+",";
		// 批量保存
		
	});
	console.log(paramsStr);
	if (paramsStr) {
		var url = $this.data("url");
		ShieldJS.ajax.post(url, {
			param : paramsStr
		}, function() {
			$this.closest("form").submit();
		})
	} else {
		ShieldJS.error("数据未变化！");
	}
});
</script>
	
</shield:permssion>
